
<!--
<h1>Custom example</h1>

<p>Shows you how to use the core plupload API.</p>

<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<br />

<div id="container">
    <a id="openFiles" href="javascript:;">[Select files]</a> 
    <a id="start_upload" href="javascript:;">[Upload files]</a>
</div>

<br />
<pre id="console"></pre>
-->

<style>
#input-fileUpLoad{
	outline:1px solid #f00;
	
}

#btn-replace{
	outline:1px solid #f00;
	width:100px;
	height:100px;
}


.uploadbox-line{
	border-bottom:1px solid #f2f2f2;
	position:relative;
	padding:5px 0px 5px 0px;
}

.uploadbox-line .background-per{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:auto;
}

#FileList{
	margin:10px auto;
	outline:0px solid #f00;
}

.imagesList{
	width:120px;
	height:140px;
	float:left;
	padding-bottom:0px;
	border:1px solid #eee;
	margin:10px 10px;
	position:relative;
	cursor:pointer;
}
.imagesList:hover{

}
.imagesList:hover .btn-file-del{
	display:block;
}

.imagesList:hover .title{
	color:#f00;
}
.imagesList .btn-file-del{
	display:none;
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	z-index:999;
	outline:0px solid #f00;
	text-align:right;
	color:#fff;
	font-size:1.5em;
	padding-right:4px;
	background:#FFB752;
	opacity:0.9;
	filter: alpha(opacity=90);
}
.imagesList .btn-file-del .ace-icon:hover{
	color:#ff0000;
}

.imagesList .imagesBox{
	width:120px;
	height:118px;
	outline:0px solid #f00;
	position:relative;
}

.imagesList img{
	width:99%;
	height:99%;
}
.imagesList .title{
	height:20px;
	line-height:20px;
	text-align:center;
	font-size:12px;
	color:#333;
	outline:0px solid #f00;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.imagesList .upload_state{
	width:50%;
	height:99%;
	position:absolute;
	left:0;
	bottom:0;
	outline:0px solid #f00;
	text-align:center;
	font-size:1em;
	text-align:right;
	padding-right:7px;
	opacity:0.5;
	filter: alpha(opacity=30);
}
.imagesList .red{
	background:#ff0000;
}
.imagesList .green{
	background:#00CC00;
}
</style>
<div class="panel">
	<div class="panel-body">
		<div class="form-group">
			<!--
			<table class="table table-nowrap">
				<thead>
					<tr>
						<th>文件名</th>
						<th>文件大小</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody id="FileList">
				</tbody>
			</table>
			-->

			<div class="tabbable">
				<ul id="myTab4" class="nav nav-tabs padding-12 tab-color-blue background-blue">
					<li class="active">
						<a href="#home4" data-toggle="tab">本地上传</a>
					</li>

					<li>
						<a href="#profile4" data-toggle="tab">插入图片</a>
					</li>

				</ul>

				<div class="tab-content">
					<div class="tab-pane in active" id="home4">
						<div class="form-group">
							<div class="row">
								<div class="col-sm-8">
									<div id="file_upload_state">
										<div class="col-sm-6">
											<label class="btn-group" id="file_state"></label>
										</div>
										<div class="col-sm-6">
											<label class="FileName"></label>
										</div>
										<div class="col-sm-12">
										<!--
											<div class="progress">
												<div style="width:50%" class="xyd-progress-bar"></div>
											</div>
										-->
										</div>	
									</div>
								</div>
								<div class="col-sm-4" style="text-align:right;">
									<div class="btn-group" id="container">
										<button id="openFiles1" type="button" class="btn btn-primary btn-sm">
											<span class="ace-icon fa fa-cloud-upload" aria-hidden="true"></span>打开文件
										</button>
										<button id="start_upload" type="button" class="btn btn-primary btn-sm">
											<span class="ace-icon fa fa-cloud-upload" aria-hidden="true"></span>开始上传
										</button>
										<button id="getFiles" type="button" class="btn btn-primary btn-sm">
											<span class="ace-icon fa fa-cloud-upload" aria-hidden="true"></span>取文件对象
										</button>
									</div>
									
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="panel panel-default">
								<div id="FileList" class="row">
									<!--
									<div class="imagesList">
										<div class="btn-file-del">
											<i class="ace-icon fa fa-trash-o fa-1x icon-only"></i>
											<i class="ace-icon fa fa-trash-o fa-1x icon-only"></i>
										</div>									
										<div class="imagesBox">
											<img src="1.jpg"/>
											<div class="upload_state"><i class="ace-icon fa fa-check"></i></div>
										</div>
										<div class="title">我是名字</div>
										
									</div>
									<div class="imagesList">
										<div class="btn-file-del"><i class="ace-icon fa fa-trash-o fa-1x icon-only"></i></div>									
										<div class="imagesBox">
											<img src="1.jpg"/>
											<div class="upload_state green"><i class="ace-icon glyphicon glyphicon-ok"></i></div>
										</div>
										<div class="title">我是名字</div>
										
									</div>
									<div class="imagesList">
										<div class="btn-file-del"><i class="ace-icon fa fa-trash-o fa-1x icon-only"></i></div>									
										<div class="imagesBox">
											<img src="1.jpg"/>
											<div class="upload_state red"><i class="ace-icon fa	fa-exclamation-circle"></i></div>
										</div>
										<div class="title">我是名字</div>
									</div>
									-->

									<div class="imagesList" style="border:0;" id="openFiles">									
										<div class="imagesBox">
											
											<div class="editable-input editable-image">
												<label class="ace-file-input ace-file-multiple" style="outline:0px solid #f00;">
													<span class="ace-file-container" data-title="Open File" style="width:120px;height:140px;">
														<span class="ace-file-name" data-title="No File ...">
															<i class="ace-icon 	fa fa-folder-open"></i>
														</span>
													</span>
												</label>
											</div>
										</div>
									</div>
									
								</div>
							</div>
						</div>
						<div class="form-group">
							<pre id="console"></pre>
						</div>
					</div>

					<div class="tab-pane" id="profile4">
						<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
					</div>

				</div>
			</div>
		</div>
		
	</div>
</div>
